import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Input, Toast } from 'antd-mobile'
import Nabar from '../../conpoment/Nabar'
import styles from './index.module.css'

function AccountDeletion() {
  const navigate = useNavigate()
  const [deletionReason, setDeletionReason] = useState('')

  const handleDeletion = () => {
    if (!deletionReason.trim()) {
      Toast.show('请输入注销原因')
      return
    }

    // 跳转到注销确认页面
    navigate('/deletion_confirmation')
  }

  return (
    <div className={styles.page}>
      <Nabar title='账号注销' sticky={false} />
      
      <div className={styles.content}>
        {/* 警告图标和提示 */}
        <div className={styles.warningSection}>
          <div className={styles.warningIcon}>!</div>
          <p className={styles.warningText}>
            注销账号将永久失效且不可恢复,并放弃以下服务
          </p>
        </div>

        {/* 后果说明 */}
        <div className={styles.consequencesList}>
          <div className={styles.consequenceItem}>
            <div className={styles.consequenceNumber}>1</div>
            <div className={styles.consequenceContent}>
              <div className={styles.consequenceTitle}>账号所产生的订单数据将清除</div>
              <div className={styles.consequenceDesc}>
                如挂号订单、医嘱订单等数据将会清除。
              </div>
            </div>
          </div>

          <div className={styles.consequenceItem}>
            <div className={styles.consequenceNumber}>2</div>
            <div className={styles.consequenceContent}>
              <div className={styles.consequenceTitle}>无法登录</div>
              <div className={styles.consequenceDesc}>
                一旦注销,您将无法使用该账号登录智慧医院平台和使用对应服务。
              </div>
            </div>
          </div>

          <div className={styles.consequenceItem}>
            <div className={styles.consequenceNumber}>3</div>
            <div className={styles.consequenceContent}>
              <div className={styles.consequenceTitle}>账号无法找回</div>
              <div className={styles.consequenceDesc}>
                一旦注销后,该账号将无法通过任何方式找回。
              </div>
            </div>
          </div>
        </div>

        {/* 注销原因输入 */}
        <div className={styles.inputSection}>
          <Input
            placeholder="请输入注销原因(必填)"
            value={deletionReason}
            onChange={setDeletionReason}
            className={styles.reasonInput}
          />
        </div>
      </div>

      {/* 确认按钮 */}
      <div className={styles.buttonContainer}>
        <Button 
          className={styles.deletionButton} 
          onClick={handleDeletion}
          block
        >
          我已同意以上条款并继续注销
        </Button>
      </div>
    </div>
  )
}

export default AccountDeletion
